<template>
  <div>
    <header class="flex">
      <MainBG />
    </header>
    <main class="flex-1 flex flex-col mt-4 items-center">
      <div class="flex" style="width: 1200px">
        <div class="meun">
          <LeftMenu />
        </div>
        <div class="right-box">
          <div class="bread-crumb">
            <Breadcrumb>
              <Breadcrumb.Item>首页</Breadcrumb.Item>
              <Breadcrumb.Item>服务指南</Breadcrumb.Item>
              <Breadcrumb.Item>常见问题</Breadcrumb.Item>
            </Breadcrumb>
          </div>
          <div class="conten-box">
            <transition name="fade" mode="out-in">
              <component ref="currentComponentsRef" :is="components[currentComponents]"></component>
            </transition>
          </div>
        </div>
      </div>
      <SwFooter />
    </main>
  </div>
</template>

<script lang="ts" setup name="WtIndex">
  import { ref } from 'vue';
  import { serviceInformationComponentsEnum } from './data/enum';
  import { Breadcrumb } from 'ant-design-vue';
  import SwFooter from '/@/businessComponents/SwFooter/index.vue';
  import MainBG from '/@/views/home/components/MainBg/index.vue';
  import LeftMenu from '/@/views/components/LeftMenu/LeftMenu.vue';

  import Branch from './pages/branch/index.vue';
  import Commonproblem from './pages/commonproblem/index.vue';



  const currentComponents = ref<string>('COMMONPROBLEM');

  const components = {
    [serviceInformationComponentsEnum.BRANCH]: Branch,
    [serviceInformationComponentsEnum.COMMONPROBLEM]: Commonproblem,
  };

</script>
<style lang="less" scoped>
  .meun {
    margin-right: 20px;
  }

  .right-box {
    width: 945px;
    background-color: #fff;
    padding: 20px 24px;
    .bread-crumb {
      margin-bottom: 20px;
    }
    .conten-box {
      height: 100%;
    }
  }
</style>
